<!--  -->
<template>
  <div>
    <el-container class="screening-box">
      <el-form :inline="true" class="form" ref="form" label-position="right" label-width="100px">
        <el-header class="screening-head">
          <div class="title">
            <i class="el-icon-search el-icon--left"></i>筛选查询
          </div>
          <div>
            <span class="toggle" v-show="showScreening" @click="showScreening=!showScreening">
              <i class="el-icon-arrow-up el-icon--left"></i>收起筛选
            </span>
            <span class="toggle" v-show="!showScreening" @click="showScreening=!showScreening">
              <i class="el-icon-arrow-down el-icon--left"></i>展开筛选
            </span>
            <el-button class="tlwok-btn" type="primary" @click="getList">查询</el-button>
            <el-button class="tlwok-btn" type="primary" plain @click="resetSearch()">重置</el-button>
          </div>
        </el-header>
        <el-main class="screening-body" v-show="showScreening">
          <el-form-item label="一级类目名称：" label-width="100" prop="userName1">
            <el-input v-model.trim="searchName1" placeholder="请输入一级类目名"></el-input>
          </el-form-item>
          <el-form-item label="二级类目名称：" label-width="100" prop="userName2">
            <el-input v-model.trim="searchName2" placeholder="请输入二级类目名"></el-input>
          </el-form-item>
          <el-form-item label="三级类目名称：" label-width="100" prop="userName3">
            <el-input v-model.trim="searchName3" placeholder="请输入三级类目名"></el-input>
          </el-form-item>
        </el-main>
      </el-form>
    </el-container>
    <div class="table-box">
      <div class="table-title">
        <span class="title">资质证书信息库</span>
        <!--        <div>-->
        <!--          <el-button-->
        <!--            class="filing-button"-->
        <!--            type="primary"-->
        <!--            icon="el-icon-plus"-->
        <!--            @click="showAddDialog(null)"-->
        <!--          >添加项目-->
        <!--          </el-button>-->
        <!--        </div>-->
      </div>
      <div class="list" style="min-height: 200px;">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item , index) in tableData" :key="index">
            <el-card class="box-card" shadow="always">
              <div class="box-card-inner">
                <i @click="del(item)" class="el-icon-error delete"></i>
                <div class="content">
                  <div @click="toNext(1,item.id)" class="name">
                    <el-link type="primary">{{item.name}}</el-link>
                  </div>
                  <div>
                    共
                    <span style="color: red">{{item.filesCount}}份</span>文件
                  </div>
                </div>

                <el-button-group class="buttons">
                  <el-button type="primary" @click="toNext(1,item.id)">打开</el-button>
                  <el-button @click="showAddDialog(item)">编辑</el-button>
                </el-button-group>
              </div>
              <!-- <el-container>
                <el-header v-if="item.filesCount <= 0">
                  <div @click="del(item)" style="height: 20px;width: 20px;float: right;background-color: red">X</div>
                </el-header>
                <el-main>
                  <div><el-link type="primary">{{item.name}}</el-link></div>
                  <div>共<span style="color: red">{{item.filesCount}}份</span>文件</div>
                </el-main>
                <el-footer>
                  <el-button type="primary" @click="toNext(item)">打开</el-button>
                  <el-button @click="showAddDialog(item)">编辑</el-button>
                </el-footer>
              </el-container>-->
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card" shadow="always">
              <div class="box-card-inner" style="line-height: 130px;cursor:pointer;" @click="showAddDialog(null)">
                <i class="el-icon-plus el-link el-link--primary" style="font-size:50px;"></i>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--    添加地域-->
    <el-dialog :title="this.editId > 0 ? '编辑' : '添加类目'" :visible.sync="addDialogVisible" center>
      <el-form :validate-on-rule-change="false" :inline-message="true" ref="userInfoForm" class="user-info-form" label-width="150px">
        <el-form-item label="分类名称：" prop="name">
          <el-input v-model.trim="addName" placeholder="请输入类目名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toAdd">保 存</el-button>
        <el-button type="primary" plain @click="addDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import md5 from 'js-md5'

export default {
  name: 'Project_list',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      tableData: [],
      searchName1: '',
      searchName2: '',
      searchName3: '',
      showScreening: true,
      addDialogVisible: false,
      addName: '',
      editId: 0,
    }
  },

  mounted() {
    this.getList()
  },
  //方法集合
  methods: {
    del: function(item) {
      this.$confirm(`确定删除【${item.name}】分类吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$axios
          .post(`/api/manage/qualification/deleteCategory`, `id=${item.id}`)
          .then(res => {
            if (res.success) {
              this.$message.success('删除成功')
              this.getList()
            } else this.$message.error(res.desc)
          })
      })
    },
    toNext(level, parentId) {
      // level：1-二级类目  2-三级类目
      let obj = [
        { name: '资质证书信息库', path: 'Qualification_Category_list' },
      ]

      if (level == 1) {
        if (parentId) {
          obj.push({
            path: `Qualification_Category_second_list?parentId=${parentId}`,
          })
        }

        let path = JSON.stringify(obj)
        this.$router.push(
          `Qualification_Category_second_list?parentId=${parentId ||
            0}&rolePath=${path}&searchName=${this.searchName2}`
        )
      } else if (level == 2) {
        let path = JSON.stringify(obj)
        this.$router.push(
          `Qualification_Category_third_list?parentId=0&rolePath=${path}&searchName=${this.searchName3}`
        )
      }
    },
    toAdd() {
      if (this.editId == 0) {
        this.$axios
          .post(
            `/api/manage/qualification/addCategory`,
            `name=${this.addName}&parentId=0`
          )
          .then(res => {
            if (res.success) {
              this.$message.success('添加成功')
              this.addDialogVisible = false
              this.getList()
            } else this.$message.error(res.desc)
          })
      } else {
        this.$axios
          .post(
            `/api/manage/qualification/updateCategory`,
            `name=${this.addName}&id=${this.editId}`
          )
          .then(res => {
            if (res.success) {
              this.$message.success('修改成功')
              this.addDialogVisible = false
              this.getList()
            } else this.$message.error(res.desc)
          })
      }
    },
    showAddDialog(item) {
      if (item == null) {
        this.editId = 0
        this.addName = ''
      } else {
        this.editId = item.id
        this.addName = item.name
      }

      this.addDialogVisible = true
    },
    getList: function() {
      if (this.searchName3) {
        this.toNext(2)
      } else if (this.searchName2) {
        this.toNext(1)
      } else {
        this.$axios
          .post(
            `/api/manage/qualification/getList`,
            `name=${this.searchName1}&parentId=0`
          )
          .then(res => {
            if (res.success) {
              this.tableData = res.result
            } else this.$message.error(res.desc)
          })
      }
    },
    // 分页数量大小设置
    handleSizeChange(val) {
      this.pageInfo.size = val
      this.pageInfo.startPage = 1
      this.getList()
    },
    // 分页当前页设置
    handleCurrentChange(val) {
      this.pageInfo.startPage = val
      this.getList()
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return 'background-color: #f5f5f5;color: #333;font-weight: bold;text-align:center'
    },
    // 修改table tr行的样式
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      return 'text-align:center'
    },
    resetSearch() {
      this.searchName1 = ''
      this.searchName2 = ''
      this.searchName3 = ''
    },
  },
}
</script>


<style lang="less" scoped>
.box-card {
  margin: 30px;
  position: relative;
  .box-card-inner {
    width: 235px;
    height: 130px;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // justify-content: space-between;
    text-align: center;
    .name {
      padding: 20px 0 20px;
    }
    .delete {
      position: absolute;
      top: 10px;
      right: 10px;
      color: red;
      font-size: 20px;
      cursor: pointer;
    }
    .buttons {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .el-button {
      width: 50%;
      border-radius: 0;
    }
  }
}
.title {
  font-weight: bold;
}

.grey {
  color: #bbb;
}

.red {
  color: red;
}

.screening-box {
  border: 1px solid #ddd;

  .form {
    width: 100%;
  }
}

.screening-head {
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .toggle {
    cursor: pointer;
    margin-right: 50px;
  }
}

.screening-body {
  border-top: 1px solid #ddd;
}

.btn-box {
  margin-top: 40px;

  .number {
    color: red;
  }

  .el-button--primary {
    .number {
      color: #fff;
    }
  }
}

.table-title {
  height: 47px;
  line-height: 47px;
  padding: 0 15px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .filing-button {
    margin-left: 30px;
  }
}

.table-box {
  border: 1px solid #ddd;
  margin-top: 30px;

  .el-tag {
    margin: 2px;
    cursor: default;
  }
}

.table-handler {
  padding: 5px 15px;
  text-align: right;

  .check-all {
    margin-right: 20px;
  }
}

.hasEdit {
  position: absolute;
  top: 0;
  left: 0;

  &::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 30px solid red;
    border-right: 30px solid transparent;
  }

  .text {
    position: absolute;
    top: -3px;
    left: 2px;
    color: #fff;
    font-size: 12px;
  }
}

.user-info-form {
  .el-select,
  .el-input {
    width: 300px;
  }

  .tags {
    width: 450px;
  }

  .el-tag {
    cursor: pointer;
    margin-right: 15px;
  }
}

.tags-dialog {
  .el-tag {
    margin-right: 15px;
    margin-bottom: 15px;

    &:last-child {
      margin-right: 30px;
    }
  }

  .button-new-tag {
    margin-bottom: 15px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    color: #5aa3e5;
    border-color: #bddaf5;
    background: #eff6fc;

    &:focus,
    &:hover {
      color: #fff;
      background: #5aa3e5;
      border-color: #5aa3e5;
    }
  }

  .input-new-tag {
    width: 90px;
    margin-bottom: 15px;
    vertical-align: bottom;
  }
}

.upload-box {
  display: inline-block;
}
</style>
<style>
.list .el-card__body {
  padding: 0px !important;
}
.list .el-footer {
  padding: 0px;
}

.list .el-footer .el-button {
  margin: 0px;
}
</style>
